<%@ page pageEncoding="UTF-8"%>
<script type="text/x-template" id="pagination">
    <div class="pagination-container" onselectstart="return false;" v-if="pagecount > 0">
        <div class="pagination-each" @click="changePage(currentpage - 1)" :class="{'choosed-disabled': currentpage == 1}">上一页</div>
        <div class="pagination-each" v-for="i in showPageNum" @click="changePage(i + pageDValue)" v-html="i + pageDValue" :class="{'choosed-active': currentpage == i + pageDValue}">
        </div>
        <div class="pagination-each" @click="changePage(currentpage + 1)" :class="{'choosed-disabled': currentpage == pagecount}">下一页</div>
        <span v-html="'共' + pagecount + '页 '"></span>
    </div>
</script>
<style>
    .pagination-container {
        margin-top: 20px;
        margin-right: 20px;
        text-align: right;
		font-size: 14px;
    }
    .pagination-each {
        display: inline-block;
        margin: 0 3px;
        line-height: 25px;
        padding: 0 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
        color: #68cacb;
        color: var(--color);
    }
    .pagination-each:hover, .pagination-each.choosed-active {
        border-color: #68cacb;
        border-color: var(--color);
        background-color: #68cacb;
        background-color: var(--color);
        color: #fff;
    }
    .pagination-each.choosed-disabled {
        background: #f2f2f2;
        color: #bfbfbf;
        border-color: #bfbfbf;
    }
</style>
<script>
    var pagination = {
        template: "#pagination",
        props: ["pagecount", "currentpage"],
        computed: {
            pageDValue: function() {
                var x = this.currentpage;
                if (x < 6 / 2 + 1 || this.pagecount <= 6) {
                    return 1;
                }
                if (x > this.pagecount - 6 / 2) {
                    return this.pagecount - 6 + 1;
                }
                return x - 6 / 2;
            },
            showPageNum: function() {
                if (this.pagecount < 6) {
                    return this.pagecount;
                } else {
                    return 6;
                }
            },
        },
        methods: {
            changePage: function(i) {
                if (i > this.pagecount || i <= 0) {
                    return;
                }
                this.currentpage = i;
                this.$dispatch("changePage", {
                    currentpage: i,
                });
            },
        }
    }
</script>
